<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <Header/>
    </el-header>
    <!-- 主体 -->
    <el-main>
      <!-- 地图 -->
      <MapBox/>
      <!-- 时间轴 -->
      <DateBar/>
      <!-- 图表 -->
      <ChartBox/>
    </el-main>
</el-container>
</template>

<script>
import Header from '@/components/Header/index'
import ChartBox from '@/components/Chart/ChartBox'
import DateBar from '@/components/DateSlider/DateBar'
import MapBox from '@/components/Map/MapBox'

// 导入边界数据（临时，后期删除）
import tongzhouBoundary from '@/utils/tongzhou_xz'
import yizhuangBoundary from '@/utils/yizhuang_taz'


export default {
  name: 'tongzhou',
  components: {
   Header,
   ChartBox,
   DateBar,
   MapBox
  },
  computed: {
    apiUrl() {
      return this.$store.getters.apiUrl;
    },
    curGetOptions() {
      return this.$store.getters.curGetOptions;
    },
    curRegion(){
      return this.$store.getters.curRegion
    },
    // curCounty() {
    //   return this.$store.getters["map/curCounty"];
    // },
    // 新的三四级菜单数据
    curopOptions(){
      return this.$store.getters.curopOptions
    },
    curMapDrawUrl(){
      return this.$store.getters['map/curMapDrawUrl']
    },
    // 日期列表
    curDatebarList(){
      return this.$store.getters['datebar/curDatebarList']
    },
    // 日期滑动条数组
    curSlideValue(){
      return this.$store.getters['datebar/curSlideValue']
    },
    // 三级菜单按钮组
    curBtnGroupActive(){
      return this.$store.getters['curBtnGroupActive']
    },
    // 一级菜单
    defaultMenu(){
      return this.$store.getters.defaultMenu
    },
    curOptionMap(){
      return this.$store.getters.curOptionMap
    }
  },
  watch: {
    // 监测三级菜单变化时
    curBtnGroupActive(){
      // 每次三级菜单变化 分别重置日期时间轴，时刻时间轴为[],[24,24]
      this.$store.getters.curGetOptions.date = [];
      this.$store.getters.curGetOptions.hour = [24,24];
    },
    // 监测一级菜单变化时
    defaultMenu(){
      // 分别重置日期时间轴，时刻时间轴为[],[24,24]
      this.$store.getters.curGetOptions.date = []
      this.$store.getters.curGetOptions.hour = [24,24]
    },
    // 监测新的三四级菜单数据 变化时
    curopOptions: {
      handler(newVal) {
        let btnGroupMenu = [],dropDownMenu = [],thirdUrl = '',fourthUrl='';
        //选中的取出来
        newVal.map(item=>{
          item.map(obj=>{
            for(let key in obj){
              if(key.startsWith("p")){
                btnGroupMenu.push(obj[key].selected) 
              }else if(key.startsWith("o")){
                dropDownMenu.push(obj[key].selected)
              }
            }
          })
        })
        //获取每一个url
        btnGroupMenu.map(item=>{
          thirdUrl+= item[0]+'='+item[1]+'&'
          if(item[1] == 'popSpace'){
             this.$store.dispatch('changeCode',0)
          }else if(item[1] == 'popTimesqure'){
            this.$store.dispatch('changeCode',0)
          }else if(item[1] == 'commuterMonitor'){
            this.$store.dispatch('map/updateMapDraw',{id:1,url:'od'})
          }else if(item[1] == 'occupationMonitor'){
            // 解决3级4级菜单bug问题 先走一遍 maptype
            this.$store.dispatch('map/updateMapType', 'o')
            this.$store.dispatch('map/updateMapDraw',{id:1,url:'polygon'})
            this.$store.dispatch('changeCode',0)
          }else if(item[1] == 'subway'||item[1] == 'bus'){
            this.$store.dispatch('map/updateMapDraw',{id:1,url:'join'})
          }else if(item[1] == 'facyDistrib'){
            this.$store.dispatch('map/updateMapDraw',{id:1,url:'scatter'})
            this.$store.dispatch('changeCode',0)
          }else if(item[1]=='landUse'){
            this.$store.dispatch('map/updateMapDraw',{id:1,url:'raster'})
            this.$store.dispatch('changeCode',0)
          }
        })

        dropDownMenu.map((item)=>{
          fourthUrl += item[0]+'='+item[1]+'&'
          // 监听od,o,d,track 改变地图类型
          if(item[0] == 'commuteWay1' || item[0] == 'commuteWay2'){
            this.$store.dispatch('map/updateMapType', 'od')
          }else{
            this.$store.dispatch('map/updateMapType', item[1])
          }
        })
        
        this.$store.dispatch('updataOPoptions', thirdUrl+fourthUrl)
        
      },
      deep: true
    },
    // 监听日期和时刻变化 更新url
    curGetOptions:{
      handler(option){
        this.getAllData(this.apiUrl, option)
      },
      deep:true
    },
    // 监测开始日期变化时请求数据
    curStartDate(val){
      this.$store.getters.curGetOptions.date[0] = val;
      this.getAllData(this.apiUrl, this.$store.getters.curGetOptions)
    },
    curEndDate(val){
      this.$store.getters.curGetOptions.date[1] = val;
      this.getAllData(this.apiUrl, this.$store.getters.curGetOptions)
    },
    // 监听地图渲染方式变化时，更改地图类型
    curMapDrawUrl(maptype){
      this.$store.dispatch('map/updateMapType', maptype)
    },
    // 监测url变化时
    apiUrl(url) {
      // 监测region
      if(this.curRegion == 'tongzhou'){
        this.$store.dispatch('map/updateBoundaryData', tongzhouBoundary)
      }else{
        this.$store.dispatch('map/updateBoundaryData', yizhuangBoundary)
      }
      this.getAllData(url, this.$store.getters.curGetOptions)
    },
    
  },
  
  beforeCreate() {
    // 修改边界
    // this.$store.dispatch("map/updateCounty", "tongzhou");
    
    
  },
  methods:{
    getAllData(url,params){
      console.log(url+ `scale=${params.scale}&date=${params.date}&hour=${params.hour}&code=${params.code}`)
      this.$axios.get(url + `scale=${params.scale}&date=${params.date}&hour=${params.hour}&code=${params.code}`).then(res => {
        // 更新地图数据
        this.$store.dispatch("map/updateMapData", res.data.map);
        // 更新关键指标
        this.$store.dispatch("figure/updateFigureList", res.data.index);
        // 更新图表数据
        this.$store.dispatch("chart/updatechart", res.data.chart);
        // 加一个判断 （监听日期变化时，解决滑动轴满格的问题）
        if(res.data.datelist !== ''){
          this.$store.dispatch("datebar/updateDatebar",res.data.datelist)
          this.$store.dispatch("datebar/getSlideValMax", [0,res.data.datelist.length - 1]);
        }
        // 判断是否需要点亮图表
        if(params.code>0){
          this.$store.dispatch('chart/hightLight', { key: this.curGetOptions.key, name: this.curGetOptions.name })
        }
        
      });
    }
  },
  mounted() {
    this.$store.state.menu.active = String(this.$route.query.id);
  },
}
</script>

<style lang="stylus">
.el-container
  width 100%
  height 100%
  background #282c38
  
  .el-header
    background #00203e
    // background rgb(48,58,88)
    padding 0
    height 50px!important

  .el-main
    padding 0
    width 100%
    height calc(100vh - 60px)
    position relative
    overflow hidden
    
</style>
